<template>
	<div class="hot-vedio">
		<div class="nav-head"><router-link to="/vedio"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">最热视频</div></div>
		<div class="top-blank"></div>
		<div class="hot-vedio-list">
			<div class="hot-vedio-box">
				<div class="time"><span class="qihao">第78期 (11 - 3)</span><span class="update-time">20:09更新</span></div>
				<div class="haibao"><img src="../../../../assets/hot-vedio-pic.png"></div>
				<div class="share"><span class="zan"><img src="../../../../assets/icon-like32.png">35</span><span class="pinlun"><img src="../../../../assets/icon-talk@2x32.png">456</span><span class="fenxiang"><img src="../../../../assets/icon-share@2x32.png">56</span></div>
				<img src="" class="stop-btn">
			</div>
			<div class="hot-vedio-box">
				<div class="time"><span class="qihao">第78期 (11 - 3)</span><span class="update-time">20:09更新</span></div>
				<div class="haibao"><img src="../../../../assets/hot-vedio-pic.png"></div>
				<div class="share"><span class="zan"><img src="../../../../assets/icon-like32.png">35</span><span class="pinlun"><img src="../../../../assets/icon-talk@2x32.png">456</span><span class="fenxiang"><img src="../../../../assets/icon-share@2x32.png">56</span></div>
				<img src="" class="stop-btn">
			</div>
			<div class="hot-vedio-box">
				<div class="time"><span class="qihao">第78期 (11 - 3)</span><span class="update-time">20:09更新</span></div>
				<div class="haibao"><img src="../../../../assets/hot-vedio-pic.png"></div>
				<div class="share"><span class="zan"><img src="../../../../assets/icon-like32.png">35</span><span class="pinlun"><img src="../../../../assets/icon-talk@2x32.png">456</span><span class="fenxiang"><img src="../../../../assets/icon-share@2x32.png">56</span></div>
				<img src="" class="stop-btn">
			</div>
			<div class="hot-vedio-box">
				<div class="time"><span class="qihao">第78期 (11 - 3)</span><span class="update-time">20:09更新</span></div>
				<div class="haibao"><img src="../../../../assets/hot-vedio-pic.png"></div>
				<div class="share"><span class="zan"><img src="../../../../assets/icon-like32.png">35</span><span class="pinlun"><img src="../../../../assets/icon-talk@2x32.png">456</span><span class="fenxiang"><img src="../../../../assets/icon-share@2x32.png">56</span></div>
				<img src="" class="stop-btn">
			</div>
			<div class="hot-vedio-box">
				<div class="time"><span class="qihao">第78期 (11 - 3)</span><span class="update-time">20:09更新</span></div>
				<div class="haibao"><img src="../../../../assets/hot-vedio-pic.png"></div>
				<div class="share"><span class="zan"><img src="../../../../assets/icon-like32.png">35</span><span class="pinlun"><img src="../../../../assets/icon-talk@2x32.png">456</span><span class="fenxiang"><img src="../../../../assets/icon-share@2x32.png">56</span></div>
				<img src="" class="stop-btn">
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from "../../../../components/music_player"
	export default{
		name:"hotVedio",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.hot-vedio-list{
	// margin-top: 88 / 100rem;
	// margin-bottom: 108 / 100rem;
	width: 100%;
	box-sizing: border-box;
	padding-left: 20 / 100rem;
	.time{
		padding-top: 32 / 100rem;
		padding-bottom:  30 / 100rem;
		font-size: 24 / 100rem;
		.update-time{
			float: right;
			margin-right: 20 / 100rem;
		}
	}
	.haibao{
		width: 710 / 100rem;
		height: 345 / 100rem;
		// overflow: hidden;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.share{
		width: 710 / 100rem;
		position: relative;
		padding-top: 20 / 100rem;
		.zan{
			// margin-left: 443 / 100rem;
			position: absolute;
			top: 20 / 100rem;
			right: 203 / 100rem;
			img{
				width: 32 / 100rem;
				vertical-align: middle;
				margin-right: 6 / 100rem;
			}
		}
		.pinlun{
			position: absolute;
			top: 20 / 100rem;
			right: 92 / 100rem;
			img{
				width: 32 / 100rem;
				vertical-align: middle;
				margin-right: 6 / 100rem;
			}
		}
		.fenxiang{
			position: absolute;
			top: 20 / 100rem;
			right: 0;
			img{
				width: 29 / 100rem;
				vertical-align: middle;
				margin-right: 6 / 100rem;
			}
		}
	}
}
</style>